<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			label {
				margin: 3px;

			}

			input {
				width: 90px;
				margin: 5px;
			}

			span {
				margin: 3px;

				margin-right: 20px;
			}

			a {
				margin: 5px;
			}

			.btactive {
				border: 1px solid blue;
				margin: 1px;
				color: white;
			}

			td {
				text-align: center;
			}
		</style>
	</head>
	<body onload="getData()">
		<div>
			<label>输入要生成的总行数：</label><input type="text" id="tvc" placeholder="输入节目总数">
			<input type="button" id="btn" value="生成数据">
		</div>
		<div>
			<table border="1" width="800">
				<!-- 表头列表 -->
				<thead>
					<tr>
						<th>序号</th>
						<th>节目名称</th>
						<th>播放时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<!-- 表体内容，id不能变 -->
				<tbody id="tvcon">
				</tbody>
			</table>
			<!--表尾分页控件  -->
			<div id="cpage"></div>
		</div>
		<!--隐藏input用于记录当前页数  -->
		<input type="hidden" id="tvp" value="1">

		<script src="js/jquery-1.11.1.min.js"></script>
		<script>
			var page = 1,
				count = 20,
				totalpage = 10;
			$(function() {
				//生成数据
				$("#btn").click(function() {
					console.log($("#tvc").val())
					$.get("createtv", {
						ct: $("#tvc").val()
					}, function(res) {
						if (res == 1) {
							console.log("创建成功！");
							// location.href = "Tvpage.html";
						} else {
							console.log("创建失败！")
						}
					});

				});
				//获取数据，并分页
				getData(); //初始化后就加载数据

			});

			//通过Ajax获取json数据显示
			function getData() {
				$.ajax({
					url: "http://127.0.0.1:9001/consumer/appGoodsUnit/findByPage",
					type: "POST",
					// data: "page=" + page + "&count=" + count,
					success: function(result) {
						console.log(result)
						$("#tvcon").html("");
						var tv = $.parseJSON(result);
						for (var i = 0; i < tv.length; i++) {
							$("#tvcon").append("<tr><td>" + tv[i].id + "</td>" + "<td>" + tv[i].name + "</td>" + "<td>" + new Date(tv[i].time) +
								"</td><td><a href='DeleteTvServlet?id=" + tv[i].id + "'>删除</a><a href='updateTV.jsp?id=" + tv[i].id +
								"&name=" + tv[i].name + "&time=" + tv[i].time + "'>修改</a></td></tr>");
						}
						//添加分页控件
						createPage("cpage", totalpage)
					}
				});
			}


			//上一页
			function prepage() {
				if (page > 1) {
					page--;
				}
				$("#tvp").val(page); //记录要传入后台的值
				getData();
			}
			//下一页
			function nextpage() {
				if (page < totalpage) {
					page++;
				}
				$("#tvp").val(page); //记录要传入后台的值
				getData();
			}


			//跳转至某一页
			function tzPage() {
				//获取输入框的值
				if ($("#tz").val().length > 0) {
					page = parseInt($("#tz").val());
					if (page > totalpage) {
						page = totalpage;
					}
					$("#tvp").val(page); //记录要传入后台的值
				}
				getData(); //获取数据
			}


			//改变当前页数是触发
			function changepage(i) {
				page = i;
				$("#tvp").val(page);
				//修改完page之后重新创建page控件，获取数据
				getData() //获取数据
			}
			//创建分页控件
			function createPage(id, talpg) {
				page = parseInt($("#tvp").val());
				$("#cp").html(page);
				//分页前先清空div
				$("#" + id).html("");

				if (talpg < 6) { //总页数小于6
					for (var i = 1; i < 6; i++) {
						$("#" + id).append("<button id='btn_'" + i + " onclick='changepage(" + i + ")'>" + i + "</button>");
					}
					$("#" + id).append("<label>...</label><label>...</label>");

				} else { //总页数大于6
					//如果当前页数小于4
					if (page < 4) {
						for (var i = 1; i < 6; i++) {
							$("#" + id).append("<button id='btn_" + i + "' onclick='changepage(" + i + ")'>" + i + "</button>");
						}
						$("#" + id).append("<label>...</label><label>...</label>");
					} else { //当前页数大于4
						$("#" + id).append("<button id='btn_1' onclick='changepage(" + 1 + ")'>1</button>");
						$("#" + id).append("<label>...</label>");

						if (page < talpg - 3) {
							//page=97;
							for (var i = page; i <= page + 3; i++) {
								$("#" + id).append("<button id='btn_" + i + "' onclick='changepage(" + i + ")'>" + i + "</button>");
							}
							if (talpg - page > 2) {
								$("#" + id).append("<label>...</label>");
							}
						} else {
							//page=97;
							for (var i = talpg - 3; i <= talpg; i++) {
								$("#" + id).append("<button id='btn_" + i + "' onclick='changepage(" + i + ")'>" + i + "</button>");
							}
						}


					}
				}
				$("#btn_" + page).addClass("btactive");
				//创建跳转页
				$("#" + id).append("<button style='margin:10px;' onclick='prepage()'>上一页</button>");
				$("#" + id).append("<span>当前<label id='cp'>" + page + "</label>/<label id='tp'>" + talpg + "</label>页</span>");
				$("#" + id).append(
					"<button style='margin:5px;' onclick='tzPage()'>跳转至</button><label>第</label><input id='tz'><label>页</label>");
				$("#" + id).append("<button style='margin:10px;' onclick='nextpage()'>下一页</button>");
			}
		</script>
	</body>
</html>
